<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions" :checkbox-item="false">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs :student-id="studentId" />
        <page-header content="学员课程" />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'user.student.course'" size="mini" type="primary" @click="create">添加课程</el-button>
      </template>
    </page-list>
    <!--<el-table v-loading="loading" :data="datas" style="width: 100%">-->
    <!--<el-table-column label="课程名">-->
    <!--  <template slot-scope="scope">-->
    <!--    <el-tooltip effect="dark" :content="scope.row.title" placement="bottom-start">-->
    <!--      <div class="course-title">{{ scope.row.title }}</div>-->
    <!--    </el-tooltip>-->
    <!--  </template>-->
    <!--</el-table-column>-->
    <!--<el-table-column prop="learn_status_text" label="学习状态" />-->
    <!--<el-table-column prop="learn_rate" label="学习进度" />-->
    <!--<el-table-column prop="total_time" label="学习时长" />-->
    <!--<el-table-column prop="lately_time" label="最近学习时间" />-->
    <!--<el-table-column label="操作">-->
    <!--  <template slot-scope="scope">-->
    <!--    <el-link v-if="scope.row.course_type == 1" type="primary" @click="$router.push('/course/video/' + scope.row.course_id + '/student/' + scope.row.user_id + '/info')">学习详情</el-link>-->
    <!--    <span v-else>-</span>-->
    <!--  </template>-->
    <!--</el-table-column>-->
    <!--</el-table>-->
    <choose-course v-if="visible" :visible.sync="visible" @submit="saveStudentCourse" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import ChooseCourse from '@/pages/course/components/ChooseStudentCourseDialog'
import Title from './components/Title'

import Tabs from './tabs';
import PageHeader from '@/components/page-header';
import StudyStatus from '@/pages/course/video/student/components/study_status.vue';
import CreateTime from '@/pages/course/video/student/components/create_time.vue';
import CourseType from '@/pages/course/video/student/components/course_type.vue';

export default {
  components: {
    PageList,
    ChooseCourse,
    Tabs,
    PageHeader
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/user/admin/student/' + this.$route.params.id + '/course/list',
      doactions: [
        {
          title: '学习详情',
          meta: { permission: 'course.video.default.note' },
          callback: ({ row }) => {
            return this.$router.push('/course/video/' + row.course_id + '/student/' + row.user_id + '/info')
          },
          display: ({ row }) => {
            return row.course_type === 1
          }
        },
        { title: '移除', callback: this.removeStudent }
      ],
      custom: {
        title: Title,
        course_type: CourseType,
        study_status: StudyStatus,
        create_time: CreateTime
      },
      visible: false
    }
  },
  computed: {
    studentId() {
      return this.$route.params.id;
    }
  },
  methods: {
    create: function() {
      this.visible = true;
    },
    removeStudent({ row }) {
      this.$box
          .confirm('确认移除吗')
          .then(() => {
            const type = {
              1: 'video',
              2: 'live',
              4: 'classes'
            }

            let typeStr = type[row.course_type];
            if (row.course_type === 2) {
              typeStr += '/small'
            }

            this.$http.delete(
                '/course/admin/' + typeStr + '/' + row.course_id + '/student/' + row.user_id + '/delete',
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {});
    },
    // 批量添加课程
    saveStudentCourse(courseIds, courseList) {
      this.$http.post(
          '/user/admin/student/' + this.studentId + '/choose/addCourse',
          {
            course_ids: courseIds
          },
          response => {
            this.$message.success(response.msg, _ => {
              this.visible = false
              this.reload();
            });
          },
          error => {
            this.$message.error(error.msg);
          }
      );
    }
  }
};
</script>

<style>
.course-title {
  width: 262px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
